<template>
  <section class="contianer">
    <el-row type="flex" justify="space-between">
      <!-- 顶部过滤列表 -->
      <div class="flights-content">
        <!-- 过滤条件 -->
        <FlightsFilters
          v-if="flightsData.options"
          :data="flightsData"
          @setAirList="setAirList"
        />
        <!-- 分页组件 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[4, 10, 12, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="newAirList.length"
        >
        </el-pagination>
        <!-- 航班头部布局 -->
        <FlightsListHead />

        <!-- 航班信息 -->
        <div class="list" v-if="getFlightsItemList.length > 0">
          <FlightsItem
            v-for="(flight, index) in getFlightsItemList"
            :key="index"
            :data="flight"
          />
        </div>
        <div v-else>暂时没有数据</div>

        <!-- 分页组件 -->
      </div>

      <!-- 侧边栏 -->
      <div class="aside">
        <FlightsAside />
      </div>
    </el-row>
  </section>
</template>


<script>
import FlightsListHead from "@/components/air/FlightsListHead";
import FlightsItem from "@/components/air/FlightsItem";
import FlightsFilters from "@/components/air/FlightsFilters";
import FlightsAside from "@/components/air/FlightsAside";
export default {
  data() {
    return {
      flightsData: {}, // 航班信息
      currentPage: 1, // 当前页码
      pageSize: 4, // 页码条数
      // FlightsItemList: [],   优化，封装入计算属性中
      newAirList: [],
    };
  },
  components: {
    FlightsListHead,
    FlightsItem,
    FlightsFilters,
    FlightsAside,
  },
  created() {
    // 实例前进行数据获取 
    this.loadPage();
  },
  watch: {
    // 侦听路由变化，如果路由有变化，则重新发送请求
    $route() {
      // 更新页面数据时重置页码
      this.currentPage = 1;
      this.loadPage();
    },
  },
  // 通过计算属性监听this.newAirList的变化，
  // 一进入页面（还未筛选时）将获取到的全部数据，赋值给this.newAirList
  // 如果筛选子组件有改变，父组件会监听到新数组返回，并将返回的新数组赋值给this.newAirList
  computed: {
    //  航班信息FlightsItem 的渲染条数，根据当前页码和页码条数决定对应的数组
    // arr.slice(start,end)  返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。找到begin end 与currentPage pageSize之间的关系
    getFlightsItemList() {
      if (!this.newAirList) {
        return [];
      }
      const begin = (this.currentPage - 1) * this.pageSize;
      const end = begin + this.pageSize;
      return this.newAirList.slice(begin, end);
    },
  },
  methods: {
    // 页面更新函数封装
    loadPage() {
      this.$axios({
        url: "/airs",
        params: this.$route.query,
      }).then((res) => {
        this.flightsData = res.data;
        console.log(this.flightsData);
        this.newAirList = [...this.flightsData.flights];
        // this.FlightsItemList = this.getFlightsItemList();
      });
    },

    // 页面条数改变时
    handleSizeChange(val) {
      this.pageSize = val;
      // this.FlightsItemList = this.getFlightsItemList();
    },
    // 页码改变时
    handleCurrentChange(val) {
      this.currentPage = val;
      // this.FlightsItemList = this.getFlightsItemList();
    },
    setAirList(newList) {
      console.log(newList);
      this.newAirList = newList;
    },
  },
};
</script>

<style scoped lang="less">
.contianer {
  width: 1000px;
  margin: 20px auto;
}

.flights-content {
  width: 745px;
  font-size: 14px;
}

.aside {
  width: 240px;
}
</style>